<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body,div,p,button,input{margin: 0 0; padding: 0 0;}
			#viewport{
				border: 1px solid #aaa;
			}
		</style>
	</head>
	<body>
		<div>
			<canvas id="viewport"></canvas>
		</div>
		<div>
			<p style="font-size: 12px;color: #777;">点击实体可以查看其速度、加速度，使用W S A D控制实体</p>
			<button onclick="process(this)">开始</button>
			<input type="checkbox" onchange="createParticle(this)" />粒子效果
			<input type="checkbox" onchange="drawCoordsSwitch(this)" />显示坐标
			<input type="checkbox" onchange="showFpsSwitch(this)" />显示fps
		</div>
	</body>
	<script type="text/javascript" src="js/ccengine.js" ></script>
	<script>
		var ccEngine=new CCEngine();
		ccEngine.preInit({
			//预初始化，设置画布
			canvas:document.getElementById('viewport'),
			width:800,
			height:800,
			background:'#000',
		}).init(function(entities){
			//初始化，设置实体
			var num=250;
			entities.push(new CCEngine.Entity(new CCEngine.Vec2(400,400),false,4,9,'rgba(189,73,50,1.0'));
			for(var i=0;i<num;i++){
				var r=CCEngine.ran(100,350);
				var v=Math.sqrt(9/(400-r));
				entities.push(new CCEngine.Entity(new CCEngine.Vec2(400+CCEngine.ran(-14,14),r),new CCEngine.Vec2(v,0),CCEngine.ran(1,2),1,CCEngine.ranColor(CCEngine.COLORS2)));
			}
			for(var i=0;i<num;i++){
				var r=CCEngine.ran(450,700);
				var v=Math.sqrt(9/(r-400));
				entities.push(new CCEngine.Entity(new CCEngine.Vec2(400+CCEngine.ran(-14,14),r),new CCEngine.Vec2(-v,0),CCEngine.ran(1,2),1,CCEngine.ranColor(CCEngine.COLORS2)));
			}
			
			for(var i=0;i<num;i++){
				var r=CCEngine.ran(100,350);
				var v=Math.sqrt(9/(400-r));
				entities.push(new CCEngine.Entity(new CCEngine.Vec2(r,400+CCEngine.ran(-14,14)),new CCEngine.Vec2(0,-v),CCEngine.ran(1,2),1,CCEngine.ranColor(CCEngine.COLORS2)));
			}
			for(var i=0;i<num;i++){
				var r=CCEngine.ran(450,700);
				var v=Math.sqrt(9/(r-400));
				entities.push(new CCEngine.Entity(new CCEngine.Vec2(r,400+CCEngine.ran(-14,14)),new CCEngine.Vec2(0,v),CCEngine.ran(1,2),1,CCEngine.ranColor(CCEngine.COLORS2)));
			}
		});
		
		function showFpsSwitch(cb){
			ccEngine.showFps=cb.checked;
		}
		
		function drawCoordsSwitch(cb){
			ccEngine.drawCoords=cb.checked;
		}
		
		function createParticle(cb){
			ccEngine.createParticle=cb.checked;
		}
		
		function process(btn){
			if(ccEngine.isRunning){
				//暂停
				ccEngine.stop();
				btn.innerHTML="开始";
			}else{
				//运行
				ccEngine.start();
				btn.innerHTML="暂停";
			}
		}
	</script>
</html>
